<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弟皇侠_图片_api</title>
</head>

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

<body style="
  background-color: black; 
  width: 100vm; height: 100vh; 
  display: flex;
  justify-content: center;
  align-items: center;
">
  <script>
    
    const len = 30;
    let img;

    function toImgWindow(urlList) {
      img = new Image();

      if (!urlList.length) return;

      img.src = urlList[0];

      img.onload = () => {
        img.style.maxWidth = '100%';
        img.style.maxHeight = '100%';
        img.style.alignItems = 'center';

        img.onclick = () => {
          document.body.removeChild(img);
          createRadioImg();
          // createRadioImg();
          // window.open(img.src)
        };

        document.body.appendChild(img);
      }

      // 加载失败
      img.onerror = () => {
        console.log('加载失败');
        urlList.shift();
        toImgWindow(urlList);
      }
    }

    const createRadioImg = () => {
      let baseUrl = window.location.origin;
      if (window.location.href.includes('tuchuang/'))
        baseUrl = window.location.href.slice(0, -1);
      const num = Math.floor(Math.random() * len);
      let suffix1 = 'jpg', suffix2 = 'png';

      Math.floor(Math.random() * len) % 2 === 0 ?
        ([suffix1, suffix2] = [suffix2, suffix1]) : '';
      const urlList = [
        `${baseUrl}/imgs/img_(${num}).${suffix1}`,
        `${baseUrl}/imgs/img_(${num}).${suffix2}`,
      ];

      console.log(urlList)

      try {
        toImgWindow(urlList);
      } catch (error) {
        console.warn('找不到图片')
      }
    }

    window.onload = createRadioImg;
  </script>
</body>

</html>